@extends('layout.default')

@section('layout.content')

<div class="row">
    <div class="col-xs-12 align-right">
        <!--<button class="btn btn-lg btn-primary create-user"><i class="ace-icon fa fa-user-plus"></i>名单录入</button>
        <button class="btn btn-lg btn-danger remove-user"><i class="ace-icon fa fa-remove"></i>名单删除</button>-->
        <a href="{{route('student.publish.export',array($publish->id,$clase->id))}}" class="btn btn-lg btn-success export-user"><i class="ace-icon fa fa-file"></i>导出名单</a>
        
    </div>
  </div><!-- /.row -->

  <div class="row">
    <div class="col-xs-12">
      <h5 class="header blue" style="margin-top:-15px;">
        {{ $publish->name }} > {{$clase->name}}
      </h5>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
      <table class="table table-hover table-striped table-bordered">
        <thead>
        <tr>
          <th class="align-middle" style="width:80px;">
          <label class="inline no-padding-left">
              <input name="checkin" type="checkbox" class="ace ace-checkbox-2 selectAll">
              <span class="lbl "> </span>
            </label> 账号
          </th>
          <th class="align-middle" style="width:70px;">姓名</th>
          <th class="align-middle" style="width:110px;">电话</th>
        </tr>
        </thead>
        <tbody>
          @foreach ($students as $i=>$student)
          <?php
              if($i == $paging) break;
              $student = $students->shift();
          ?>
          <tr>
            <td class="align-middle">
              <label class="inline no-padding-left">
                  <input name="checkin" type="checkbox" data-user="{{ $student->id }}" class="ace ace-checkbox-2">
                  <span class="lbl "> </span>
                </label>
                {{ $student->account }}
            </td>
            <td class="align-middle">{!! $student->info->present()->face !!}{{ $student->info->name }}</td>
            <td class="align-middle">{{ $student->info->mobile }}</td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>

    <div class="col-xs-6">
      <table class="table table-hover table-striped table-bordered">
        <thead>
        <tr>
          <th class="align-middle" style="width:80px;">
          <label class="inline no-padding-left">
              <input name="checkin" type="checkbox" class="ace ace-checkbox-2 selectAll">
              <span class="lbl "> </span>
            </label> 账号
          </th>
          <th class="align-middle" style="width:70px;">姓名</th>
          <th class="align-middle" style="width:110px;">电话</th>
        </tr>
        </thead>
        <tbody>
          @foreach ($students as $i=>$student)
          <tr>
            <td class="align-middle">
              <label class="inline no-padding-left">
                  <input name="checkin" type="checkbox" data-user="{{ $student->id }}" class="ace ace-checkbox-2">
                  <span class="lbl "> </span>
                </label>
                {{ $student->account }}
            </td>
            <td class="align-middle">{!! $student->info->present()->face !!}{{ $student->info->name }}</td>
            <td class="align-middle">{{ $student->info->mobile }}</td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>

  </div>

@stop

@section('javascript')

  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="{{URL::asset('assets/js/jquery-validate-methods.js')}}"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>

  <script type="text/javascript">
    $(function () {



      $('.create-user').on('click', function(e) {
        var tid = $(this).data('tid');
        var uri = '';//
        layer.open({
          type: 2,
          title: '报名录入',
          area: ['400px', '650px'],
          shade: 0.8,
          content: uri,
        });

      });




      function setItemCheckBox(flag) {
        $(":checkbox[name=checkin]").prop("checked",flag);
      }

      $(".selectAll").click(function(){
        //1.获取全选的状态
        var flag = this.checked;//获取全选的状态
        if(flag){
          $(this).prop("checked", true);
        }else{
          $(this).prop("checked", false);
        }

        setItemCheckBox(flag);
      });

      $(":checkbox[name=checkin]").click(function(){
        var flagV = this.checked;
        if(flagV){
          $(this).prop("checked", true);
        }else{
          $(this).prop("checked", false);
        }
        //获取所有复选框的个数
        var len = $(":checkbox[name=checkin]").length;
        //获取所有被选中的复选框的个数
        var checked_len = $(":checkbox[name=checkin]:checked").length;
        if(len == checked_len){
          //alert("全选中了");
          $("#selectAll").prop("checked",true);
        } else if(checked_len == 0) {
          $("#selectAll").prop("checked",false);
        } else {
          $("#selectAll").prop("checked",false);
        }
      });


    });
  </script>
@stop
